<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" href="gallerystyle2.css" />

<script type="text/javascript" src="motiongallery2.js" />

<script type="text/javascript" src="http://jackshannon.co.uk/wp-content/themes/theme/jquery.js"></script>
<script>
 /**
 * @author Alexandre Magno
 * @desc Center a element with jQuery
 * @version 1.0
 * @example
 * $("element").center({
 *
 * 		vertical: true,
 *      horizontal: true
 *
 * });
 * @obs With no arguments, the default is above
 * @license free
 * @param bool vertical, bool horizontal
 * @contribution Paulo Radichi
 *
 */
jQuery.fn.center = function(params) {

		var options = {

			vertical: true,
			horizontal: true

		}
		op = jQuery.extend(options, params);

   return this.each(function(){

		//initializing variables
		var $self = jQuery(this);
		//get the dimensions using dimensions plugin
		var width = $self.width();
		var height = $self.height();
		//get the paddings
		var paddingTop = parseInt($self.css("padding-top"));
		var paddingBottom = parseInt($self.css("padding-bottom"));
		//get the borders
		var borderTop = parseInt($self.css("border-top-width"));
		var borderBottom = parseInt($self.css("border-bottom-width"));
		//get the media of padding and borders
		var mediaBorder = (borderTop+borderBottom)/2;
		var mediaPadding = (paddingTop+paddingBottom)/2;
		//get the type of positioning
		var positionType = $self.parent().css("position");
		// get the half minus of width and height
		var halfWidth = (width/2)*(-1);
		var halfHeight = ((height/2)*(-1))-mediaPadding-mediaBorder;
		// initializing the css properties
		var cssProp = {
			position: 'absolute'
		};

		if(op.vertical) {
			cssProp.height = height;
			cssProp.top = '50%';
			cssProp.marginTop = halfHeight;
		}
		if(op.horizontal) {
			cssProp.width = width;
			cssProp.left = '50%';
			cssProp.marginLeft = halfWidth;
		}
		//check the current position
		if(positionType == 'static') {
			$self.parent().css("position","relative");
		}
		//aplying the css
		$self.css(cssProp);


   });

};
</script>
		<script type="text/javascript">
			$(document).ready(function(){

				$("h2").append('<em></em>')

				$(".thumbs a").click(function(){
				
					var largePath = $(this).attr("href");
					var largeAlt = $(this).attr("title");
					
					$("#largeimg").attr({ src: largePath, alt: largeAlt });
					
					$("h2 em").html(" (" + largeAlt + ")"); return false;
				});
				
			});
		</script>
		
		
<style type="text/css">
/* Reset */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

/* remember to define focus styles! */
:focus {
	outline: 0;
}

/* remember to highlight inserts somehow! */
ins {
	text-decoration: none;
}
del {
	text-decoration: line-through;
}

/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: collapse;
	border-spacing: 0;
}


/* Text */

body {
color: #000000;
font: 16px/1.5em Helvetica, "Arial";
}

a:link {color: #e30000; text-decoration:none;}
a:visited {color: #e30000; text-decoration:none;}
a:hover {color: #e30000; text-decoration:underline;}
a:active {color: #e30000; text-decoration:underline;}
h1, h2, h3, h4, h5, h6 {
color: black;
font-family: helvetica, arial, verdana, sans-serif;
font-weight: normal;
}

h1 {
font-size: 218%;
}

h2 {
font-size: 164%;
}

h3 {
font-size: 145%;
}

h4 {
font-size: 118%;
}

#header{margin-bottom: 32px; background-color: black; height: 34px;}

.container{
  width: 940px ;
  margin-left: auto ;
  margin-right: auto ;}
  
#title{position:absolute;top:7px;width:243px;height:19px;background:url('images/sprites.png') 0 0;}
  
#navlist{float: right; position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:11px;}
#navlist li, #navlist a{height:11px;display:block;}

#portfolio{left:-468px;width:83px;}
#portfolio{background:url('http://jackshannon.co.uk/new/images/sprites.png') 0 -20px;}
#portfolio a:hover{background: url('http://jackshannon.co.uk/new/images/sprites.png') -87px -20px;}

#blog{left:-352px;width:40px;}
#blog{background:url('http://jackshannon.co.uk/new/images/sprites.png') 0 -32px;}
#blog a:hover{background: url('http://jackshannon.co.uk/new/images/sprites.png') -87px -32px;}

#associates{left:-280px;width:87px;}
#associates{background:url('images/sprites.png') 0 -44px;}
#associates a:hover{background: url('http://jackshannon.co.uk/new/images/sprites.png') -87px -44px;}

#about{left:-161px;width:54px;}
#about{background:url('http://jackshannon.co.uk/new/images/sprites.png') 0 -56px;}
#about a:hover{background: url('http://jackshannon.co.uk/new/images/sprites.png') -87px -56px;}

#contact{left:-76px;width:76px;}
#contact{background:url('http://jackshannon.co.uk/new/images/sprites.png') 0 -68px;}
#contact a:hover{background: url('http://jackshannon.co.uk/new/images/sprites.png') -87px -68px;}

#content{padding-top: 32px;}
#viewer{text-align: center; display: inline-block; height: 560px; width: 770px; }

#thumbs{border-style: none; float: right; display: inline-block; height: 560px; width: 155px; }

#thumbs a{
border-style: none;
filter:alpha(opacity=80);
  /* CSS3 standard */
  opacity:0.8;}

#thumbs a:hover{
border-style: none;
filter:alpha(opacity=100);
  /* CSS3 standard */
  opacity:1;}
  
#holder{overflow:hidden; position:fixed; height: 560px; width: 155px;}
#slider{position:absolute;
	width:155px;}

</style>

</head>

<body>
<div id="header">

<div class="container">
<a href="/" id="title"></a>
<ul id="navlist">
  <li id="portfolio"><a href="default.asp"></a></li>
  <li id="blog"><a href="css_intro.asp"></a></li>
  <li id="associates"><a href="css_syntax.asp"></a></li>
  <li id="about"><a href="css_syntax.asp"></a></li>
  <li id="contact"><a href="css_syntax.asp"></a></li>
</ul>
</div>
</div>

<div class="container">


<!--Gallery-->
<div id="viewer">

<img id="largeimg" src="images/nyc/img-01.jpg"/>
</div>

<div id="thumbs" class="thumbs">

		
		
		<div style="overflow:hidden;">
<div id="motioncontainer" style="width:155px; height:560px; overflow:hidden; position: relative;">
<div id="motiongallery" style="position:absolute; left:0; top:0;">

<!--Gallery Contents below-->



<a href="images/nyc/img-01.jpg"><img src="images/nyc/thumbs/img-01.jpg"/></a><br />
<a href="images/nyc/img-02.jpg"><img src="images/nyc/thumbs/img-02.jpg"/></a><br />
<a href="images/nyc/img-03.jpg"><img src="images/nyc/thumbs/img-03.jpg"/></a><br />
<a href="images/nyc/img-04.jpg"><img src="images/nyc/thumbs/img-04.jpg"/></a><br />
<a href="images/nyc/img-05.jpg"><img src="images/nyc/thumbs/img-05.jpg"/></a><br />
<a href="images/nyc/img-06.jpg"><img src="images/nyc/thumbs/img-06.jpg"/></a><br />
<a href="images/nyc/img-07.jpg"><img src="images/nyc/thumbs/img-07.jpg"/></a><br />
<a href="images/nyc/img-08.jpg"><img src="images/nyc/thumbs/img-08.jpg"/></a><br />
<a href="images/nyc/img-09.jpg"><img src="images/nyc/thumbs/img-09.jpg"/></a><br />
<a href="images/nyc/img-10.jpg"><img src="images/nyc/thumbs/img-10.jpg"/></a><br />
<a href="images/nyc/img-11.jpg"><img src="images/nyc/thumbs/img-11.jpg"/></a><br />
<a href="images/nyc/img-12.jpg"><img src="images/nyc/thumbs/img-12.jpg"/></a><br />
<a href="images/nyc/img-13.jpg"><img src="images/nyc/thumbs/img-13.jpg"/></a><br />
<a href="images/nyc/img-14.jpg"><img src="images/nyc/thumbs/img-14.jpg"/></a><br />
<a href="images/nyc/img-15.jpg"><img src="images/nyc/thumbs/img-15.jpg"/></a><br />
<a href="images/nyc/img-16.jpg"><img src="images/nyc/thumbs/img-16.jpg"/></a><br />
<a href="images/nyc/img-17.jpg"><img src="images/nyc/thumbs/img-17.jpg"/></a><br />
<a href="images/nyc/img-18.jpg"><img src="images/nyc/thumbs/img-18.jpg"/></a><br />
<a href="images/nyc/img-19.jpg"><img src="images/nyc/thumbs/img-19.jpg"/></a><br />
<a href="images/nyc/img-20.jpg"><img src="images/nyc/thumbs/img-20.jpg"/></a>

<!--End Gallery Contents-->

</div>
</div>



</div>
</div>
</div>



</body>
</html>
